<script setup>
import { inject, ref, shallowRef } from "vue";
import { getCompanyDetail } from "@/api/company.js";
const getAssetsFile = inject("getAssetsFile");

const certSearchForm = shallowRef(null);
const certSearchFormRules = {
	name: {
		required: true,
		trigger: ["input", "blur"],
		message: "请输入完整企业名称",
	},
};
const certSearchFormData = ref({
	name: "",
});
const searchDisabled = ref(false);
const searchCert = (e) => {
	e.preventDefault();
	certSearchForm.value.validate((errors) => {
		if (!errors) getCertSearchData();
		else {
			console.log(errors);
		}
	});
};

const resetData = ref({
	name: null,
	addr: null,
	details: [],
});
const certSearchData = ref({
	name: null,
	addr: null,
	details: [],
});
const count = ref(0);
const getCertSearchData = async () => {
	searchDisabled.value = true;
	const { name, addr, details } = resetData.value;
	certSearchData.value.details = details;
	certSearchData.value.name = name;
	certSearchData.value.addr = addr;
	count.value++;
	const params = {
		name: certSearchFormData.value.name,
	};
	const res = await getCompanyDetail(params);
	try {
		if (res.data.code === 200) {
			if (res.data.data.length > 0) {
				console.log(certSearchData.value);
				certSearchData.value.name = res.data.data[0].name;
				certSearchData.value.addr = res.data.data[0].addr;
				certSearchData.value.details = [];
				res.data.data.forEach((item) => {
					certSearchData.value.details.push({
						grade: item.grade,
						num: item.num,
						fileUrl: item.fileUrl,
					});
				});
			}
		}
	} catch (e) {
		console.log(e);
	} finally {
		setTimeout(() => {
			searchDisabled.value = false;
		}, 1e3);
	}
};
</script>

<template>
	<div class="pageContent">
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>证书查询</div>
			</n-h6>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		<n-form ref="certSearchForm" :model="certSearchFormData" :rules="certSearchFormRules" label-placement="left" require-mark-placement="left">
			<n-grid :cols="2" :x-gap="0">
				<n-form-item-gi :span="1" label="企业名称" path="name">
					<n-input v-model:value="certSearchFormData.name" placeholder="请输入完整企业名称" clearable style="margin-right: 10px" />
					<n-button :disabled="searchDisabled" :loading="searchDisabled" type="primary" @click="searchCert">
						查询{{ searchDisabled ? "中" : "" }}
					</n-button>
				</n-form-item-gi>
			</n-grid>
		</n-form>
		<n-divider class="certSearchDividerMid"></n-divider>
		<div v-if="certSearchData.name === null && count > 0">
			<span style="font-weight: bold; padding: 8px; margin-right: 8px">搜索结果</span>暂无数据
		</div>
		<div v-else-if="certSearchData.name !== null && count > 0" :key="count">
			<n-list bordered>
				<n-list-item>
					<n-grid :cols="6" :x-gap="10" :y-gap="10">
						<n-gi :span="2">
							<n-thing style="font-weight: bold">
								企业名称: <span style="font-weight: normal">{{ certSearchData.name }}</span>
							</n-thing>
						</n-gi>
						<n-gi :span="4">
							<n-thing style="font-weight: bold">
								企业地址: <span style="font-weight: normal">{{ certSearchData.addr }}</span>
							</n-thing>
						</n-gi>
					</n-grid>
				</n-list-item>
				<n-list-item v-for="(item, index) in certSearchData.details">
					<n-grid :cols="6" :x-gap="10" :y-gap="10">
						<n-gi :span="2">
							<n-thing style="font-weight: bold">
								证书等级: <span style="font-weight: normal">{{ item.grade }}</span>
							</n-thing>
						</n-gi>
						<n-gi :span="4">
							<n-thing style="font-weight: bold">
								证书编号: <span style="font-weight: normal">{{ item.num }}</span>
							</n-thing>
						</n-gi>
						<n-gi :span="6">
							<div class="flex">
								<div style="font-weight: bold">证书图片:&nbsp;</div>
								<div>
									<img :src="item.fileUrl" alt="" style="height: 900px; width: 655px" />
								</div>
							</div>
						</n-gi>
					</n-grid>
				</n-list-item>
			</n-list>
		</div>
	</div>
</template>

<style scoped>
.certSearchContent {
	background: #fff;
	padding: 30px;
	width: calc(100% - 60px);
}
.certSearchTitle {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
.certSearchDivider {
	background-color: var(--primary-color);
	height: 4px;
	margin-top: 0;
	padding: 0;
}
.certSearchDividerMid {
	margin: 10px 0;
	padding: 0;
}
</style>
